<!DOCTYPE html>
<html>
  <head>
    <title>{{ messages.loading }} | {{ messages.appName }}</title>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
    <script type="module" src="/styles.ts"></script>
    <style>
      .nuxt-loader-bar {
        background: #00DC82;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
      }
      .triangle-loading {
        position: absolute;
      }
      .triangle-loading>path {
        fill: none;
        stroke-width: 4px;
        stroke-linecap: round;
        stroke-linejoin: round;
        /* Stroke-dasharray property */
        stroke-dasharray: 128;
        stroke-dashoffset: 128;
        animation: nuxt-loading-move 3s linear infinite;
      }
      .nuxt-logo:hover .triangle-loading>path {
        animation-play-state: paused;
      }
      @keyframes nuxt-loading-move {
        100% {
          stroke-dashoffset: -128;
        }
      }
      @media (prefers-color-scheme: dark) {
        html, body {
          color: white;
          color-scheme: dark;
        }
      }
    </style>
  </head>
  <body class="font-sans antialiased relative overflow-hidden min-h-screen bg-white dark:bg-[#020420] text-[#020420] dark:text-white flex flex-col justify-center items-center text-center">
    <a href="https://nuxt.com/?utm_source=nuxt-loading-screen" target="_blank" rel="noopener" class="nuxt-logo group flex items-end gap-4" id="nuxtImg">
      <div class="relative">
        <svg class="triangle-loading text-[#00DC82]/80 group-hover:text-[#00DC82]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80">
          <path stroke="currentColor" d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567" />
        </svg>
        <svg class="dark:text-gray-200 dark:group-hover:text-white text-[#020420]/80 group-hover:text-[#020420]" xmlns="http://www.w3.org/2000/svg" width="214" height="53" fill="none" viewBox="0 0 800 200">
          <path fill="currentColor" d="M377 200a4 4 0 0 0 4-4v-93s5.244 8.286 15 25l38.707 66.961c1.789 3.119 5.084 5.039 8.649 5.039H470V50h-27a4 4 0 0 0-4 4v94l-17-30-36.588-62.98c-1.792-3.108-5.081-5.02-8.639-5.02H350v150h27ZM676.203 143.857 710.551 92h-25.73a9.972 9.972 0 0 0-8.333 4.522L660.757 120.5l-15.731-23.978A9.972 9.972 0 0 0 636.693 92h-25.527l34.348 51.643L608.524 200h24.966a9.969 9.969 0 0 0 8.29-4.458l19.18-28.756 18.981 28.72a9.968 9.968 0 0 0 8.313 4.494h24.736l-36.787-56.143ZM724.598 92h19.714V60.071h28.251V92H800v24.857h-27.437V159.5c0 10.5 5.284 15.429 14.43 15.429H800V200h-16.869c-23.576 0-38.819-14.143-38.819-39.214v-43.929h-19.714V92ZM590 92h-15c-3.489 0-6.218.145-8.5 2.523-2.282 2.246-2.5 3.63-2.5 7.066v52.486c0 8.058-.376 12.962-4 16.925-3.624 3.831-8.619 5-16 5-7.247 0-12.376-1.169-16-5-3.624-3.963-4-8.867-4-16.925v-52.486c0-3.435-.218-4.82-2.5-7.066C519.218 92.145 516.489 92 513 92h-15v62.422c0 14.004 3.892 25.101 11.676 33.292C517.594 195.905 529.103 200 544 200c14.897 0 26.204-4.095 34.123-12.286 7.918-8.191 11.877-19.288 11.877-33.292V92Z" />
        </svg>
      </div>
      <span class="inline-block font-mono leading-none text-[#00DC82] group-hover:border-[#00DC42] text-[16px] font-semibold border-[#00DC42]/50 bg-[#00DC42]/10 group-hover:bg-[#00DC42]/15 px-2.5 py-1.5 border rounded">{{ version }}</span>
    </a>
    <div class="nuxt-loader-bar"></div>
    <script>
      if (typeof window.fetch === 'undefined') {
        setTimeout(() => window.location.reload(), 200)
      } else {
        const check = async () => {
          try {
            const body = await window
              .fetch(window.location.href)
              .then(r => r.text())
            if (!body.includes('__NUXT_LOADING__')) {
              return window
                .location
                .reload()
            }
          } catch {}
          setTimeout(check, 200)
        }
        check()
      }
    </script>
  </body>
</html>
